<template>
  <div class="passenger-box">
    <div style="display: flex; padding: 10px 15px">
      <div style="display: flex; align-items: center">
        <span>睡眠质量趋势：</span>
        <div style="display: inline-block" class="tab">
          <el-radio-group v-model="tabData" size="small" @change="change">
            <el-radio-button label="month">本月</el-radio-button>
            <el-radio-button label="year">本年</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>
    <div ref="passenger" style="width: 100%; height: 260px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
let chart = null;
getSleepReportBar;
import { getSleepReportBar } from "@/api/equipment/index";
export default {
  props: ["imei"],
  data() {
    return {
      tabData: "month",
      barData: [],
    };
  },
  methods: {
    change(val) {
      this.getbarData();
    },
    getbarData() {
      getSleepReportBar(this.imei, this.tabData).then((res) => {
        if (this.tabData == "month") {
          this.barData = res.sleepReportBarInfo.sleepMonthReport;
        } else if (this.tabData == "year") {
          this.barData = res.sleepReportBarInfo.sleepYearReport;
        }
        this.setOptions(this.barData);
      });
    },
    setOptions(data) {
      let xData = [];
      let rem = [];
      let lightTime = [];
      let deepTime = [];
      let awakeTime = [];
      for (let i in data) {
        xData.push(data[i].date);
        rem.push(data[i].remTime);
        lightTime.push(data[i].lightTime);
        deepTime.push(data[i].deepTime);
        awakeTime.push(data[i].awakeTime);
      }
      const option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
          //formatter: '{a}<br />{c}'
        },
        // backgroundColor: '#0c2d55',
        color: ["#5F6CF8", "#409EFF", "#F9BD55", "#00DAA6"],
        legend: {
          show: true,
          left: "3%",
          top: "8%",
          icon: "rect",
          itemWidth: 15, // 图例标记的图形宽度。
          itemHeight: 15, //  图例标记的图形高度。
          textStyle: {
            color: "#606266",
            fontSize: 14,
            padding: [0, 8, 0, 8],
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          width: "95%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              //坐标轴轴线相关设置。数学上的x轴
              show: true,
              lineStyle: {
                color: "#606266",
              },
            },
            axisLabel: {
              //坐标轴刻度标签的相关设置
              textStyle: {
                // color: '#FFFFFF',
                fontSize: 12,
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "#233653",
              },
            },
            axisTick: {
              show: false,
            },
            data: xData,
          },
        ],
        yAxis: [
          {
            nameTextStyle: {
              // color: "#fff",
              fontSize: 12,
              padding: [0, 60, 0, 0],
            },
            // minInterval: 1,
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "#1160a0",
                type: "dashed",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#606266 ",
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                // color: '#fff',
                fontSize: 14,
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: false,
          },
        ],
        series: [
          {
            name: "深眠",
            type: "bar",
            stack: "睡眠时间",
            barWidth: 25,
            label: {
              show: false,
            },
            data: deepTime,
          },
          {
            name: "浅眠",
            type: "bar",
            label: {
              show: false,
            },
            stack: "睡眠时间",
            data: lightTime,
          },
          {
            name: "REM",
            type: "bar",

            label: {
              show: false,
            },
            stack: "睡眠时间",
            data: rem,
          },
          {
            name: "清醒",
            type: "bar",

            label: {
              show: false,
            },
            stack: "睡眠时间",
            data: awakeTime,
          },
        ],
      };
      chart.setOption(option);
    },
  },
  mounted() {
    console.log("22222222222333333", this.imei);
    chart = echarts.init(this.$refs.passenger);
    this.getbarData();
  },
};
</script>

<style lang="scss" scoped></style>
